<template>
	<view class="serve-container">
		<!-- 服务列表 -->
		<view @click="toPageDesc(index)" class="serve-item" v-for="(item, index) in serviceList" :key="index">
			<!-- 标题部分 -->
			<view class="serve-header">
				<text class="serve-title">{{item.title}}</text>
				<text v-if="item.subtitle" class="serve-subtitle line-2">{{item.subtitle}}</text>
			</view>

			<!-- 图片内容 -->
			<view class="serve-image">
				<image :src="item.imageUrl" mode="aspectFill" class="banner-image"></image>
			</view>

			<!-- 顾问信息 -->
			<view class="consultant-info">
				<view class="avatar-container">
					<image :src="item.consultant.avatar" mode="aspectFill" class="avatar"></image>
				</view>
				<view class="info">
					<text class="name">{{item.consultant.name}}</text>
					<text class="company line-1">{{item.consultant.company}}</text>
				</view>
				<view class="detail-btn-container">
					<button class="detail-btn">查看详情</button>
				</view>
			</view>
		</view>

		<!-- 发布按钮 -->
		<view @click="toPageClick" class="box-create shadow-2" style="z-index: 999;">
			<text class="iconfont-yjgs">
				&#xe886;
			</text>
			<text class="ml-10 pos-r" style="top: -2rpx;">机构入住</text>
		</view>

		<!-- 管理服务按钮 -->
		<view @click="toMyServices" class="box-manage shadow-2" style="z-index: 999;">
			<text class="iconfont-yjgs">
				&#xe633;
			</text>
			<text class="ml-10 pos-r" style="top: -2rpx;">我的信息</text>
		</view>

		<!-- 入住说明按钮 -->
		<view v-if="instructionImageUrl" @click="toInstructionPage" class="box-instruction shadow-2" style="z-index: 999;">
			<text class="iconfont-yjgs">
				&#xe693;
			</text>
			<text class="ml-10 pos-r" style="top: -2rpx;">入住说明</text>
		</view>
		<!-- end -->

		<!-- 加载更多按钮 -->
		<view v-if="loadMoreStatus === 'loading'" class="load-more">
			{{loadingText}}
		</view>
		<view v-else-if="loadMoreStatus === 'noMore' && serviceList.length > 0" class="load-more">
			没有更多数据了
		</view>
		<view v-else-if="serviceList.length === 0 && !isLoading" class="empty-data">
			<image src="/static/images/empty-box.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无服务数据</text>
		</view>

		<!-- 入住说明弹窗 -->
		<view v-if="showInstructionModal" class="instruction-modal" @click="closeModal">
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="closeModal">
				<text class="close-icon">✕</text>
			</view>
			
			<!-- 图片容器 -->
			<view class="image-container" @click.stop="">
				<!-- 加载状态遮罩 -->
				<view v-if="imageLoading" class="loading-overlay">
					<text class="loading-text">图片加载中...</text>
				</view>
				
				<!-- 错误状态 -->
				<view v-if="imageError" class="error-state">
					<text class="error-text">图片加载失败</text>
					<button class="retry-btn" @click="retryLoadImage">重试</button>
				</view>
				
				<!-- 图片显示 -->
				<image 
					v-if="!imageError"
					:src="instructionImageUrl" 
					mode="widthFix"
					class="instruction-image"
					:class="{ 'image-loading': imageLoading }"
					@load="onImageLoad"
					@error="onImageError"
					show-menu-by-longpress
				/>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		findServiceGetList
	} from "@/api/extend.js"
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		configMap
	} from "@/utils";
	export default {
		data() {
			return {
				options: {},
				serviceList: [],
				page: 1,
				limit: 6,
				isLoading: false,
				hasMore: true,
				loadingText: '加载中...',
				loadMoreStatus: 'more',
				// 弹窗相关
				showInstructionModal: false,
				instructionImageUrl: '',
				imageLoading: false,
				imageError: false
			}
		},
		computed: configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
		onLoad(options) {
			this.options = options
			this.findServiceGetListFunc();
		},
		// 监听页面上拉触底事件
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.loadMore();
			}
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.refreshList();
		},
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: '找资金',
				imageUrl: '',
				path: '/pages/extend/index/index_policy?uid=' + (that.uid || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: '找资金',
				query: {
					uid: this.uid || -1
				},
				imageUrl: `${this.$timer.ensureUrl(this.itemObj1.fmt_url)}`
			};
		},
		// #endif
		methods: {
			// 刷新列表
			refreshList() {
				this.page = 1;
				this.serviceList = [];
				this.hasMore = true;
				this.loadMoreStatus = 'more';
				this.findServiceGetListFunc();

				// 延迟结束下拉刷新，提升体验
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 800);
			},
			findServiceGetListFunc() {
				this.isLoading = true;
				this.loadMoreStatus = 'loading';

				findServiceGetList({
					type: this.options.type || 4,
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.data && res.data.data) {
						
						this.instructionImageUrl = res.data.info_data;
						
						// 将后端数据格式转换为页面所需格式
						const newServices = res.data.data.map(item => {
							return {
								id: item.id,
								title: item.title,
								subtitle: item.content || '',
								imageUrl: item.cover_image,
								consultant: {
									name: item.card?.name || '',
									company: item.card?.position?.company_name || '',
									avatar: item.card?.avatar || ''
								}
							}
						});

						// 添加到现有列表
						this.serviceList = [...this.serviceList, ...newServices];

						// 判断是否还有更多数据
						if (res.data.current_page >= res.data.last_page || newServices.length < this.limit) {
							this.hasMore = false;
							this.loadMoreStatus = 'noMore';
						} else {
							this.hasMore = true;
							this.loadMoreStatus = 'more';
						}
					} else {
						this.hasMore = false;
						this.loadMoreStatus = 'noMore';
					}
					this.isLoading = false;
				}).catch(() => {
					this.isLoading = false;
					this.loadMoreStatus = 'more';
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},

			// 加载更多数据
			loadMore() {
				if (this.isLoading || !this.hasMore) return;
				this.page++;
				this.findServiceGetListFunc();
			},

			toPageDesc(index) {
				const serviceId = this.serviceList[index]?.id;
				uni.navigateTo({
					url: `/pages/extend/index/index_serve_desc?id=${serviceId}&type=${this.options.type || null}`
				})
			},
			toPageClick() {
				if (!this.isLogin) {
					toLogin();
					return
				}
				uni.navigateTo({
					url: '/pages/extend/index/index_serve_send?type=' + this.options.type || 4
				})
			},
			toMyServices() {
				if (!this.isLogin) {
					toLogin();
					return
				}
				uni.navigateTo({
					url: '/pages/extend/index/index_serve_manage?type=' + this.options.type || 4
				})
			},
			toInstructionPage() {
				this.showInstructionModal = true;
				this.imageLoading = true;
				this.imageError = false;
			},
			closeModal() {
				this.showInstructionModal = false;
				this.imageLoading = false;
				this.imageError = false;
			},
			onImageLoad() {
				this.imageLoading = false;
				this.imageError = false;
			},
			onImageError() {
				this.imageLoading = false;
				this.imageError = true;
			},
			retryLoadImage() {
				this.imageLoading = true;
				this.imageError = false;
				// 强制重新加载图片
				const url = this.instructionImageUrl;
				this.instructionImageUrl = '';
				this.$nextTick(() => {
					this.instructionImageUrl = url;
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.box-create {
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		bottom: 300rpx;
		right: 0rpx;
		position: fixed;
		width: 200rpx;
		height: 60rpx;
		background-color: #00009E;
		color: white;
	}

	.box-manage {
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		bottom: 220rpx;
		right: 0rpx;
		position: fixed;
		width: 200rpx;
		height: 60rpx;
		background-color: #4974f5;
		color: white;
	}

	.box-instruction {
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		bottom: 140rpx;
		right: 0rpx;
		position: fixed;
		width: 200rpx;
		height: 60rpx;
		background-color: #28a745;
		color: white;
	}

	.serve-container {
		padding: 20rpx;
	}

	.serve-item {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.serve-header {
		padding: 10rpx 0 20rpx;
	}

	.serve-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333C5C;
		display: block;
		margin-bottom: 10rpx;
	}

	.serve-subtitle {
		font-size: 26rpx;
		color: #516279;
		display: block;
		line-height: 1.4;
	}

	.serve-image {
		margin: 20rpx 0;
		border-radius: 12rpx;
		overflow: hidden;
		text-align: center;
	}

	.banner-image {
		width: 100%;
		max-height: 300rpx;
		border-radius: 12rpx;
		display: block;
	}

	.consultant-info {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.avatar-container {
		margin-right: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
		display: block;
	}

	.company {
		font-size: 26rpx;
		color: #999;
		display: block;
		margin-top: 4rpx;
	}

	.detail-btn-container {
		margin-left: auto;
	}

	.detail-btn {
		background-color: #ffffff;
		color: #4974f5;
		font-size: 28rpx;
		padding: 12rpx 30rpx;
		border-radius: 50rpx;
		border: 2rpx solid #4974f5;
	}

	.load-more {
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
		color: #999;
	}

	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-image {
		width: 400rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 入住说明弹窗样式 */
	.instruction-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.close-btn {
		position: fixed;
		top: 40rpx;
		right: 40rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10000;
		cursor: pointer;
		transition: background-color 0.3s;
		
		&:hover {
			background-color: rgba(0, 0, 0, 0.8);
		}
	}

	.close-icon {
		font-size: 36rpx;
		color: #ffffff;
		line-height: 1;
	}

	.image-container {
		width: 90vw;
		max-height: 90vh;
		overflow-y: auto;
		position: relative;
		/* 改为普通块级元素，不使用 flex，避免图片被裁剪 */
	}

	.instruction-image {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 10rpx;
		margin: 0 auto;
		/* 添加水平居中，垂直方向保持自然流动 */
		
		&.image-loading {
			opacity: 0.3;
		}
	}

	.loading-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
		border-radius: 10rpx;
	}

	.loading-state {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300rpx;
	}

	.loading-text {
		font-size: 30rpx;
		color: #ffffff;
	}

	.error-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
	}

	.error-text {
		font-size: 30rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.retry-btn {
		background-color: #4974f5;
		color: #ffffff;
		font-size: 28rpx;
		padding: 15rpx 40rpx;
		border-radius: 50rpx;
		border: none;
	}
</style>